﻿@page "/chips/api"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates most commonly used API functionalities of Chip control from the property pane. Select any combination of properties from the property pane to customize the appearance of Chip.</p>
</SampleDescription>
<ActionDescription>
    <p>In this sample, Default Chip is rendered with minimal configuration.</p>
    <p>This sample can be customized further with the combination of Chip properties from the property pane. For example,</p>
    <ul>
        <li>Color variant can be changed by selecting the color DropdownList from property pane.</li>
        <li>Leading and Trailing icons can be enabled by selecting Leading or Trailing Icon checkbox from property pane.</li>
        <li>Leading icon can be customized with avatar initials, icons and images from property pane</li>
        <li>Outline Chip type can be enabled by checking outline checkbox from property pane.</li>
    </ul>
</ActionDescription>


<div class="col-lg-8 control-section sb-property-border">
    <div id="chip-api-wrapper">
        <SfChip CssClass="@ParentCssClass">
            <ChipItems>
                <ChipItem Text="Janet Leverling"
                          LeadingIconCss="@(AvatarIcon ? AvatarClass : LeadingIconCss ? "janet" : "")"
                          TrailingIconCss="@(TrailingIconCss ? "e-dlt-btn" : "")"
                          CssClass="@($"{ChipColor} {(Outline ? "e-outline" : "")}")"
                          LeadingText="@(LeadingIconText == "letter" ? "JL" : "")">
                </ChipItem>
            </ChipItems>
        </SfChip>
    </div>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div><div class="property-panel-content">
            <table id="property" title="Properties" class="property-panel-table">
                <tbody>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Color</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div>
                                <SfDropDownList TValue="string" TItem="DropDownModel" DataSource="@ColorData" Placeholder="Select a color">
                                    <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                                    <DropDownListEvents TValue="string" TItem="DropDownModel" ValueChange="@(e => { ChipColor = e.Value; })"></DropDownListEvents>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Leading icon</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div style="padding-left: 0;padding-top: 0">
                                <SfCheckBox TChecked="bool" ValueChange="@(e => { LeadingIconCss = (bool)e.Checked; })">
                                </SfCheckBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Avatar</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div>
                                <SfDropDownList TValue="string" TItem="DropDownModel" DataSource="@AvatarData" Placeholder="Select Avatar type">
                                    <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                                    <DropDownListEvents TValue="string" TItem="DropDownModel" ValueChange="@Avatar"></DropDownListEvents>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Trailing icon</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div style="padding-left: 0;padding-top: 0">
                                <SfCheckBox TChecked="bool" ValueChange="@(e => { TrailingIconCss = (bool)e.Checked; })"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Outline</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div style="padding-left: 0;padding-top: 0">
                                <SfCheckBox TChecked="bool" ValueChange="@(e => { Outline = (bool)e.Checked; })"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    string ChipColor = String.Empty;
    string LeadingIconText = string.Empty;
    string AvatarClass = string.Empty;
    string ParentCssClass = string.Empty;
    bool Outline = false;
    bool LeadingIconCss = false;
    bool AvatarIcon = false;
    bool TrailingIconCss = false;
    List<DropDownModel> ColorData = new List<DropDownModel>()
    {
        new DropDownModel { Text = "Default", Value = "e-default" },
        new DropDownModel { Text = "Primary", Value = "e-primary" },
        new DropDownModel { Text = "Success", Value = "e-success" },
        new DropDownModel { Text = "Danger", Value = "e-danger" },
        new DropDownModel { Text = "Warning", Value = "e-warning" },
        new DropDownModel { Text = "Info", Value = "e-info" },
    };
    List<DropDownModel> AvatarData = new List<DropDownModel>()
    {
        new DropDownModel { Text = "None", Value = "none" },
        new DropDownModel { Text = "Icon", Value = "icon" },
        new DropDownModel { Text = "Image", Value = "image" },
        new DropDownModel { Text = "Letter", Value = "letter" },
    };
    public class DropDownModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public string Value { get; set; }
    }
    public void Avatar(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownModel> args)
    {
        ParentCssClass = "e-leading-avatar";
        AvatarIcon = true;
        AvatarClass = string.Empty;
        if (args.Value == "none")
        {
            ParentCssClass = string.Empty;
            LeadingIconText = string.Empty;
            AvatarIcon = false;
        }
        else if (args.Value == "image")
        {
            AvatarClass = "janet";
        }
        else if (args.Value == "icon")
        {
            AvatarClass = "e-icon";
        }
        else if (args.Value == "letter")
        {
            LeadingIconText = args.Value;
        }
        StateHasChanged();
    }
}

<style>
    #chip-api-wrapper .janet {
        background-image: url('images/chips/janet.png');
    }

    #chip-api-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
    }
    /* chips sample icons */
    .e-chip .e-chip-avatar.e-icon {
        font-family: 'e-user-icon';
    }
    .e-chip .e-chip-avatar.e-icon:before {
        content: "\e700";
    }
    @@font-face {
        font-family: 'e-user-icon';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNuAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAAAArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAAA3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiAe1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1JlZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAbABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4AdABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>